import React, { Component } from 'react'
import '../css/store.css'
import {
    SearchOutlined,
    ReconciliationOutlined,
} from '@ant-design/icons';
import axios from '../utils/request'
import s15 from '../imgs/15.png'
import s16 from '../imgs/16.png'
import s17 from '../imgs/17.png'
import s18 from '../imgs/18.png'
import s19 from '../imgs/19.png'
import s20 from '../imgs/20.png'
import s21 from '../imgs/21.png'
import s22 from '../imgs/22.png'
import s23 from '../imgs/23.png'
import s24 from '../imgs/24.png'
import s25 from '../imgs/25.png'
import s26 from '../imgs/26.webp'
import s29 from '../imgs/29.png'
import { Carousel } from 'antd';
import debounce from '../utils/debounce'
const contentStyle = {
    height: '140px',
    color: '#fff',
    lineHeight: '140px',
    textAlign: 'center',
    background: '#364d79',
};

export default class Store extends Component {
    goshop() {
        this.props.history.push('/shop')
    }

    skin() {
        this.props.history.push('/skin')
    }

    wife() {
        this.props.history.push('/wife')
    }

    stomach() {
        this.props.history.push('/stomach')
    }

    breathe() {
        this.props.history.push('/breathe')
    }

    nutrition() {
        this.props.history.push('/nutrition')
    }

    family() {
        this.props.history.push('/family')
    }

    ear() {
        this.props.history.push('/ear')
    }

    boy() {
        this.props.history.push('/boy')
    }

    bone() {
        this.props.history.push('/bone')
    }

    heart() {
        this.props.history.push('/heart')
    }
    state = {
        list: []
    }
    componentDidMount() {
        this.getlist()
    }
    getlist() {
        axios({
            url: '/getlist',
            method: 'post',
        }).then(res => {
            this.setState({
                list: res.data.data
            })
        })
    }
    detail(id) {
        this.props.history.push(`/detail/` + id);
    }
    search = (value) => {
        debounce(() => {
            axios({
                url: '/search1',
                method: 'post',
                data: {
                    value: value
                }
            }).then(res => {
                this.setState({
                    list: res.data.data
                })
            })
        }, 1000)

    }
    order() {
        this.props.history.push('/order')
    }
    render() {
        const { list } = this.state
        return (
            <div className='store'>
                <div className='header'>
                    <span>商城</span>
                </div>
                <div className='main'>

                    {/* 搜索 */}
                    <div className="inp">
                        <div className="input">
                            <div className='icon'>
                                <SearchOutlined />
                            </div>
                            &emsp;<input placeholder="请输入药品名称" onChange={(e) => this.search(e.target.value)}></input>
                        </div>
                        &nbsp;
                        <span className="reco" onClick={() => this.order()}> <ReconciliationOutlined /></span>
                    </div>

                    {/* 快速购药 */}
                    <div className="purchase">
                        <div className="purch_one">&nbsp;
                            <span>快速购药</span>
                            &nbsp;
                            <span>安全品质保证</span>
                        </div>
                        <div className="imagea_m3">
                            <li onClick={() => { this.skin() }}>
                                <span><img src={s15}></img></span>
                                <span>皮肤用药</span>
                            </li>
                            <li onClick={() => this.wife()}>
                                <span><img src={s16}></img></span>
                                <span>妇科用药</span>
                            </li>
                            <li onClick={() => this.stomach()}>
                                <span><img src={s17}></img></span>
                                <span>肠胃消化</span>
                            </li>
                            <li onClick={() => this.breathe()}>
                                <span><img src={s18}></img></span>
                                <span>呼吸用药</span>
                            </li>
                            <li onClick={() => this.nutrition()}>
                                <span><img src={s19}></img></span>
                                <span>营养补充</span>
                            </li>
                            <li onClick={() => this.family()}>
                                <span><img src={s20}></img></span>
                                <span>家庭常备</span>
                            </li>
                            <li onClick={() => this.ear()}>
                                <span><img src={s21}></img></span>
                                <span>耳鼻咽喉</span>
                            </li>
                            <li onClick={() => this.boy()}>
                                <span><img src={s22}></img></span>
                                <span>男科用药</span>
                            </li>
                            <li onClick={() => this.bone()}>
                                <span><img src={s23}></img></span>
                                <span>骨科用药</span>
                            </li>
                            <li onClick={() => this.heart()}>
                                <span><img src={s24}></img></span>
                                <span>心脑血管</span>
                            </li>
                        </div>
                    </div>

                    {/*  图片*/}
                    <div className="images">
                        <Carousel autoplay>
                            <div>
                                <img src={s25}></img>
                            </div>
                            <div>
                                <img src="https://img2.baidu.com/it/u=2718876307,2220031986&fm=26&fmt=auto"></img>
                            </div>
                            <div>
                                <img src="https://img2.baidu.com/it/u=1131850738,1893205384&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=281"></img>
                            </div>
                        </Carousel>

                    </div>

                    {/*  医我看*/}
                    <div className="dithink">
                        <div className="purch_one">&nbsp;
                            <span>医我看</span>
                            &nbsp;
                            <span>名医好物推荐</span>
                        </div>
                        <div className='img_imgs'>
                            <img src={s26}></img>
                        </div>
                        <div className='images_1'>
                            <img src={s29} onClick={() => this.goshop()}></img>
                        </div>
                    </div>

                    <div className="shop_go">
                        <div className='shop_go_one'>
                            <h6>美洽心选</h6>
                        </div>
                        <div className='shop_go_two'>
                            {
                                list.length && list.map((item, index) => {
                                    return <div key={index} className='shop_go_to'>
                                        <img src={item.sking} onClick={() => this.detail(item.id)}></img>
                                        <div>
                                            <li><span>{item.skinge}</span> <span>{item.sktype}</span></li>
                                            <li>￥{item.skprice}</li>
                                        </div>
                                    </div>
                                })
                            }
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
